<template>
  <h1>猜数字练习</h1>
  <input type="text" placeholder="请输入您猜的数字"
         v-model="num">
  <button @click="guess">猜一猜</button>
  <h3>你猜的结果是{{result}}</h3>
</template>

<script setup>
import {ref} from "vue";

//生成一个随机数
let x = parseInt(Math.random() * 100)+1;
console.log(x);
//定义变量用来保存用户输入的数字
const num = ref('');
//定义变量用来保存显示的结果
const result = ref('');
//定义猜数字的方法
const guess = ()=>{
  //如果未输入数字或为非数字,不再继续向下执行
  if(num.value.trim()=='' || isNaN(num.value)){
    num.value = '';//清空输入框
    alert('请输入数字!');
    return;
  }
  if(num.value < x){
    result.value = '猜小了!';
  }else if(num.value > x){
    result.value = '猜大了!';
  }else{
    result.value = '猜对了!';
  }
}

</script>

<style scoped>

</style>